<template>
  <div v-show="show">

    <div class="one" v-for="(item,index) of list" :key="index" @click="goDetail(item)">

      <div class="one_info">
        <div class="icon_describe">
          <image class="shop_icon" :src="item.indexIcon" mode="scaleToFill"></image>
          <div class="describe">
            <div class="describe_name">{{item.name}}</div>
            <div class="describe_word">{{item.description}}</div>
          </div>
        </div>
        <div class="navigation_all">
          <div class="navigation_icon" @click.stop="gonavigation(item.longitude,item.latitude)">
            <img class="navigation_icon_size" src="https://static.music.daoyintech.com/navigation-icon.png" alt="">
          </div>
          <div class="navigation_km">{{item.distance>1000 ? item.distance/1000 + 'km' : item.distance + 'm'}}</div>
        </div>
      </div>
      <div class="cell" @click.stop="cell(item.description)">
        <div class="address">
          <img class="address_icon" src="https://static.music.daoyintech.com/addressicon.png" alt="">
          <div class="address_name">{{item.address}}</div>
        </div>
        
        <img class="cell_icon" src="https://static.music.daoyintech.com/cellicon.png" alt="">
      </div>

    </div>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        list:[],
        show:false
      }
    }, 
    onLoad(){
      this.getSetting()
      wx.showLoading({
        title: '加载中',
      })
    },
    onShow(){
     
     
    },
    methods:{
      //查看详情
      goDetail(item){
        wx.navigateTo({
            url:"/pages/near-shop-detail/main?item=" + JSON.stringify(item)
        })
      },
      gonavigation(longitude,latitude){
        wx.openLocation({
          latitude: parseFloat(latitude),
          longitude: parseFloat(longitude)
        })
      },
      //定位权限查询
      getSetting(){
        let self = this
        wx.getSetting({
          success: (res) => {
            console.log(JSON.stringify(res))
            // res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面
            // res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权
            // res.authSetting['scope.userLocation'] == true    表示 地理位置授权
            if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
              wx.showModal({
                title: '请求授权当前位置',
                content: '需要获取您的地理位置，请确认授权',
                success: function (res) {
                  if (res.cancel) {
                    wx.showToast({
                      title: '拒绝授权',
                      icon: 'none',
                      duration: 1000
                    })
                  } else if (res.confirm) {
                    wx.openSetting({
                      success: function (dataAu) {
                        if (dataAu.authSetting["scope.userLocation"] == true) {
                          self.getPlace()
                        } else {
                          wx.showToast({
                            title: '授权失败',
                            icon: 'none',
                            duration: 1000
                          })
                        }
                      }
                    })
                  }
                }
              })
            } else if (res.authSetting['scope.userLocation'] == undefined) {
              //调用wx.getLocation的API
              console.log(1)
              self.getPlace()
            }
            else {
              //调用wx.getLocation的API
              console.log(2)
              self.getPlace()
            }
          }
        })

      },
      //获取定位
      getPlace(){
        let self = this
        wx.getLocation({
          type: 'wgs84',
          success (ret) {
            if(ret.latitude){
              self.getData(ret.latitude,ret.longitude)
            }
            // const latitude = res.latitude
            // const longitude = res.longitude
            // const speed = res.speed
            // const accuracy = res.accuracy
          },fail(err){
            console.log(err)
          }
        })
      },
      //获取店铺数据
      getData(latitude,longitude){
        let self = this
        self.$http.get(`/mapShop/findByNeNearlyBase?latitude=`+latitude+`&longitude=`+longitude).then((ret)=>{
          self.list = ret.data.data
          setTimeout(function () {
            wx.hideLoading()
            self.show = true
          }, 2000)
        })  
      },
      //拨打电话
      cell(description){
        let arr = description.split(':')
        let phone = arr[arr.length-1]
        console.log(phone)
        wx.makePhoneCall({
          phoneNumber: phone
        })
      }
    }
  }
</script>

<style scoped>
  .one{
    background-color: #ffffff;
    padding: 18rpx 25rpx 0 22rpx;
    border-bottom: 20rpx solid #E9E7E7
  }
  .one_info{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx
  }
  .icon_describe{
    display: flex;
  }
  .shop_icon{
    width: 160rpx;
    height: 140rpx;
  }
  .describe{
    margin-left: 15rpx;
    width: 400rpx;
  }
  .describe_name{
    font-size: 32rpx;
    color: #040404;
    font-weight: 600
  }
  .describe_word{
    margin-top: 6rpx;
    font-size: 20rpx;
    color: #928F8F;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .navigation_all{
    margin-top: 20rpx
  }
  .navigation_icon{
    width: 60rpx;
    height: 60rpx;
    background-color: #D25A3D;
    border-radius: 50%
  }
  .navigation_icon_size{
    width: 100%;
    height: 100%;
    border-radius: 50%
  }
  .navigation_km{
    font-size: 20rpx;
    color: #928F8F;
    margin-top: 15rpx
  }
  .cell{
    height: 67rpx;
    display: flex;
    align-items: center;
    justify-content: space-between
  }
  .address{
    display: flex;
    align-items: center
  }
  .address_icon{
    width: 20rpx;
    height: 24rpx;
  }
  .address_name{
    font-size: 21rpx;
    color: #928F8F;
    margin-left: 5rpx;
    width: 400rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .cell_icon{
    width: 36rpx;
    height: 36rpx;
  }
</style>
